<template>
  <div>
    <div>
        <template>
        <!-- 轮播图 -->
        <el-carousel :interval="4000" type="card" height="333px">
        <el-carousel-item v-for="item in 3" :key="item">
            <h3 class="medium">{{ item }}</h3>
            </el-carousel-item>
        </el-carousel>
        </template>
        </div>
        <div>
        <el-row>
        <el-col :span="6" v-for="b in menus" :key="b.id" >
            <el-card :body-style="{ padding: '0px' }">
            <!--  <img src="require('../../assets/img/{{b.imgSrc}})" class="image"> -->
            <img :src="b.imgSrc" class="image">
            <div style="padding: 1px;">
                <div>{{b.name}}</div>
                <div>价格:{{b.price}} 作者:{{b.author}}</div>
                <el-button type="text"  @click="querybook(b.id)" circle>更多信息</el-button>
            </div>
            </el-card>
        </el-col>
        </el-row>

          </div>

  </div>
</template>

<script>
export default {
    data(){
      return {
        menus: [],
      }
    },
    methods:{
      queryMenus() {

      this.$axios.get('api/index/menu')
        .then(res => {
          console.log(res.data)
          this.menus = res.data
        })
    },

    },
    created() {
        this.queryMenus();
    }
}
</script>

<style>

</style>